<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 整体替换</title>
    <style>
    	.custom{font-size: 16px;border:1px solid green;}
    	.custom p{background: rgba(255,0,0,.3);}
    </style>
</head>
<body>
    <div id="app">
		<custom>
			<!-- 在父组件中 写入 html 结构目的是将html 插入子组件 -->
			<div>我是 div1 </div>
			<div>我是 div2 </div>
			<div>我是 div3 </div>
			<!-- <div>我是 div4 </div> -->
		</custom>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
    /*
		如果想自定义组件内容，改变组件内部的 html 结构，进行格式化定制，需要通过 slot 实现

		slot 标签，在子组件中使用，用来接收父组件传来的 html 结构
			在 slot 中可以自定义默认内容

    */
	    var custom = Vue.extend({
	    	data(){
	    		return {
	    			"list" : 0
	    		}
	    	},
	    	template : `
				<div class="custom">
					<slot>
						<p>这是1</p>
						<p>这是2</p>
						<p>这是3</p>
						<p>这是4</p>
					</slot>
				</div>
	    	`
	    });
	    Vue.component('custom',custom);
	    let vm = new Vue({
	    	el : '#app'
	    });
    </script>
</body>
</html>